<template>
    <div>
        <VoSchemaForm :model="model" :schema="schema"></VoSchemaForm>
        <div>
            <pre>{{modelJson}}</pre>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from '@/views/md/sf/tree.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    name1: {
                        label: '树',
                        widget: 'tree',
                        enum: [{
                            label: '开发部',
                            id: 'A',
                            children: [{
                                label: '架构师',
                                id: 'A-1'
                            }, {
                                label: 'Web前端工程师',
                                id: 'A-2'
                            }, {
                                label: 'Android工程师',
                                id: 'A-3'
                            }, {
                                label: 'IOS工程师',
                                id: 'A-4'
                            }, {
                                label: 'JAVA工程师',
                                id: 'A-5'
                            }, {
                                label: 'PHP工程师',
                                id: 'A-6'
                            }, {
                                label: 'Python工程师',
                                id: 'A-7'
                            }]
                        }, {
                            label: '产品部',
                            id: 'B',
                            children: [{
                                label: '产品经理',
                                id: 'B-1'
                            }, {
                                label: '产品助理',
                                id: 'B-2'
                            }, {
                                label: '测试',
                                id: 'B-3'
                            }, {
                                label: '实施',
                                id: 'B-4'
                            }]
                        }],
                        ui: {
                            nodeKey: 'id',
                            showCheckbox: true,
                            draggable: true,
                            defaultExpandAll: true
                        }
                    },
                    name2: {
                        label: '异步选项',
                        widget: 'tree',
                        enum: [],
                        asyncData(resolve) {
                            setTimeout(() => {
                                resolve([{
                                    label: '开发部',
                                    id: 'A',
                                    children: [{
                                        label: '架构师',
                                        id: 'A-1'
                                    }, {
                                        label: 'Web前端工程师',
                                        id: 'A-2'
                                    }, {
                                        label: 'Android工程师',
                                        id: 'A-3'
                                    }, {
                                        label: 'IOS工程师',
                                        id: 'A-4'
                                    }, {
                                        label: 'JAVA工程师',
                                        id: 'A-5'
                                    }, {
                                        label: 'PHP工程师',
                                        id: 'A-6'
                                    }, {
                                        label: 'Python工程师',
                                        id: 'A-7'
                                    }]
                                }, {
                                    label: '产品部',
                                    id: 'B',
                                    children: [{
                                        label: '产品经理',
                                        id: 'B-1'
                                    }, {
                                        label: '产品助理',
                                        id: 'B-2'
                                    }, {
                                        label: '测试',
                                        id: 'B-3'
                                    }, {
                                        label: '实施',
                                        id: 'B-4'
                                    }]
                                }])
                            }, 2000)
                        },
                        ui: {
                            nodeKey: 'id',
                            showCheckbox: true
                        }
                    },
                    name3: {
                        label: '仅绑定子节点',
                        widget: 'tree',
                        enum: [{
                            label: '第一级1',
                            id: '1',
                            children: [{
                                label: '第二级1',
                                id: '1-1',
                                children: [{
                                    label: '第三级1',
                                    id: '1-1-1'
                                }, {
                                    label: '第三级2',
                                    id: '1-1-2'
                                }]
                            }, {
                                label: '第一级2',
                                id: '1-2'
                            }]
                        }, {
                            label: '产品部',
                            id: '2'
                        }],
                        custom: {
                            leafOnly: true
                        },
                        ui: {
                            nodeKey: 'id',
                            showCheckbox: true
                        }
                    }
                },
                ui: {
                    labelWidth: 100
                },
                col: {
                    span: 12
                }
            }
        }
    },
    computed: {
        modelJson() {
            return JSON.stringify(this.model, null, 4)
        }
    }
}
</script>

<style>

</style>
